
		<div class="ui-portlet">
			{{template wxes/_user_wxes}}
			<ol class="breadcrumb">
			  <li><a href="/users/index"><i class="fa fa-home"></i>&nbsp;&nbsp;135公众平台</a></li>
			  <li class="active">管理菜单项</li>
			  <li>公众号：{{$current_wxinfo['Wx']['name']}}</li>
			</ol> 
		</div>          
       <hr>
    <div class="text-right">
    	<a href="?group=2">微信菜单</a>
    	<a href="?group=1">微网站导航</a>
    </div>   
<link href="/js/fancytree/skin-bootstrap/ui.fancytree.min.css" rel="stylesheet"
    class="skinswitcher">
<style>
.bs-navbar-preview .nav > li > a  {padding:10px 10px;}
.bs-navbar-preview .navbar-nav {float:none;}
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu{
	min-width: 100%;
    width: 100%;
}
.bs-navbar-preview .nav > li {border-right:1px solid #ddd;}
.bs-navbar-preview .nav > li:last-child{border-right:0 none;}
.text-danger {
    color: #f00;
}

 #treetable tr th, #treetable tr td:nth-of-type(1), #treetable tr td:nth-of-type(3), #treetable tr td:nth-of-type(5) {
    text-align: center;
}
ul.fancytree-container{display:none;}
span.fancytree-title,table.fancytree-ext-table span.fancytree-node{cursor:move;}
</style>       


<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/js/fancytree/jquery.fancytree-all-deps.min.js"></script>



  <script src="/js/fancytree/jquery.fancytree.dnd.js"></script>
  <script src="/js/fancytree/jquery.fancytree.edit.js"></script>
  <script src="/js/fancytree/jquery.fancytree.glyph.js"></script>
  <script src="/js/fancytree/jquery.fancytree.table.js"></script>
  <script src="/js/fancytree/jquery.fancytree.wide.js"></script>
  
   {{if $group == 1}}
   <div>
       <a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'add'))}}?group=1">新增微网站导航</a>
   </div>
   {{else}}
   		<section style="border: 0px none; padding: 0px;margin-bottom:15px;">
		    <section class="135brush layout" style="white-space: normal;font-size: 14px; line-height: 25px; margin: 2px auto; padding: 10px 10px; border: 2px dashed #dedcde;max-width: 100%;">
		        <p style="margin: 0 0;">
		            在135编辑菜单后，需要点击“同步菜单到微信公众号”，公众号里才会生效。<!-- 如果需要在135配置菜单，需要进行<a href="/user_settings/setting?type=dev">开发者设置</a>。 -->
		        </p>
		    </section>
		    <section style="display: block; width: 0; height: 0; clear: both;"></section>
		</section>

		
	   	
	   
	   {{if $current_wxinfo['Wx']['verify_type'] == -1 }}
		   <p style="color:red;">公众号未认证，只能允许设置微信素材中的内容作为菜单打开网址与回复消息。</p>
		   <div>
		       <a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'add'))}}?group=2&type=view_limited"><i class="fa fa-plus"></i> &nbsp; <i class="fa fa-link"></i> 新增跳转网址菜单</a>
		       <a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'add'))}}?group=2&type=media_id"><i class="fa fa-plus"></i> &nbsp; <i class="fa fa-envelope-o" aria-hidden="true"></i> 新增发送消息菜单</a>
		       <a class="btn btn-warning" onclick="if(!confirm('是否确认要修改微信公众号的的菜单，将会覆盖现有菜单内容')) return false" href="{{$this->Html->url(array('action'=>'setMenu'))}}"><i class="fa fa-cloud-upload"></i> 同步菜单到微信公众号</a>
		   </div>
	   	{{else}}
		   	<p style="color:red;">公众号已认证</p>
		   <div>
		       <a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'add'))}}?group=2&type=view"><i class="fa fa-plus"></i> &nbsp; <i class="fa fa-link"></i> 新增跳转网址菜单</a>
		       <a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'add'))}}?group=2&type=click"><i class="fa fa-plus"></i> &nbsp; <i class="fa fa-envelope-o" aria-hidden="true"></i> 新增发送消息菜单</a>
		       <a class="btn btn-warning" onclick="if(!confirm('是否确认要修改微信公众号的的菜单，将会覆盖现有菜单内容')) return false" href="{{$this->Html->url(array('action'=>'setMenu'))}}"><i class="fa fa-cloud-upload"></i> 同步菜单到微信公众号</a>
		   </div>		   
	   	{{/if}}
	   	
   {{/if}}

		<p><br/></p>
   <!--
          
    <table class="ui-portlet table table-striped table-hover">
    <?php
        $tableHeaders =  $this->Html->tableHeaders(array(
            '菜单名称',
            '菜单类型',
			'回复消息key/打开网址',
            '操作',
        ));

        echo '<thead>'.$tableHeaders.'</thead>';

        $rows = array();
        foreach ($datalist AS $item) {
            $actions = $this->Html->link('修改', array('controller'=>'wx_menus','action' => 'edit', $item['WxMenu']['id']));
            $actions .= ' &nbsp; ' . $this->Html->link('排序前移', array('controller'=>'wx_menus','action' => 'moveUp', $item['WxMenu']['id']));
$actions .= ' &nbsp; ' .$this->Html->link('删除', array('controller'=>'wx_menus','action' => 'delete', $item['WxMenu']['id']),array('onclick'=>"if(confirm('是否确认要删除？')) return ajaxAction(this.href);"));

	$event_name = '回复消息';     
	if(in_array($item['WxMenu']['type'],array('view','view_limited'))) {
		$event_name = '打开网址';  
	}       

            $row_item = array(
                $item['WxMenu']['name'],
				$event_name,
				($item['WxMenu']['type'] == 'view' ? ($item['WxMenu']['link']?'<a target="_blank" href="'.$item['WxMenu']['link'].'">查看网址</a>':'<small>有二级时无需设置</small>' ): $item['WxMenu']['slug']),
                $actions,
            );

			if( strlen($item['WxMenu']['name']) > 16 ) { $row_item[2] .= '<br>子菜单标题超过了16个字节';}
			elseif( strlen($item['WxMenu']['link']) > 256 && $item['WxMenu']['type'] == 'view' ) { $row_item[2] .= '<br>链接超过了256字节';}
			elseif( strlen($item['WxMenu']['slug']) > 128 && $item['WxMenu']['type'] == 'click' ) { $row_item[2] .= '<br>消息接口推送Key值超过了128字节';}


			if($item['WxMenu']['type'] == 'view_limited' || $item['WxMenu']['type'] == 'media_id' ) {
					$row_item[2] = $item['WxMenu']['media_id'] ? $item['WxMenu']['media_id'] : '<small class="text-danger" >需要选择素材</small>';
			}
			$rows[] = $row_item;

			foreach($item['children'] as $child)
			{
				$sub_actions = $this->Html->link('修改', array('controller'=>'wx_menus','action' => 'edit', $child['WxMenu']['id']));
                $sub_actions .= ' &nbsp; ' . $this->Html->link('排序前移', array('controller'=>'wx_menus','action' => 'moveUp', $child['WxMenu']['id']));
				$sub_actions .= ' &nbsp; ' . $this->Html->link('删除', array('controller'=>'wx_menus','action' => 'delete', $child['WxMenu']['id']),array('onclick'=>"if(confirm('是否确认要删除？')) return ajaxAction(this.href);"));
				$event_name = '回复消息';     
				if(in_array($child['WxMenu']['type'],array('view','view_limited'))) {
					$event_name = '打开网址';  
				}  
            	$row_item = array(
                	'<span style="color:#ddd;">| - - - - &nbsp;</span>'.$child['WxMenu']['name'],
					$event_name,
					($child['WxMenu']['type'] == 'view' ? ($child['WxMenu']['link']?'<a target="_blank" href="'.$child['WxMenu']['link'].'">查看网址</a>':'<small class="text-danger" >需要设置网址</small>') : ($child['WxMenu']['slug']?$child['WxMenu']['slug']:'<small class="text-danger" >需要设置事件</small>')),
               		$sub_actions,
            	);

				if( strlen($child['WxMenu']['name']) > 40 ) { $row_item[2] .= '<br>子菜单标题超过了40个字节';}
				elseif( strlen($child['WxMenu']['link']) > 256  && $child['WxMenu']['type'] == 'view' ) { $row_item[2] .= '<br>链接超过了256字节';}
				elseif( strlen($child['WxMenu']['slug']) > 128  && $child['WxMenu']['type'] == 'click' ) { $row_item[2] .= '<br>消息接口推送Key值超过了128字节';}

				if($child['WxMenu']['type'] == 'view_limited' || $child['WxMenu']['type'] == 'media_id' ) {
					$row_item[2] = $child['WxMenu']['media_id'] ? $child['WxMenu']['media_id'] : '<small class="text-danger" >需要选择素材</small>';
				}
				$rows[] = $row_item;
			}
        }
        echo $this->Html->tableCells($rows);
    ?>
    </table>
 -->
    <table id="treetable" class="table table-condensed table-hover table-striped fancytree-fade-expander">
    <colgroup>
    	<col width="60px"></col>   
      <col width="*"></col>
      <col width="100px"></col>
      <col width="300px"></col>
      <col width="100px"></col>
    </colgroup>
    <thead>
      <tr> <th>编号</th><th>菜单名称</th> <th>菜单类型</th> <th>回复消息key/打开网址</th> <th>操作</th></tr>
    </thead>
    <tbody>
      <tr><td></td> <td></td> <td></td> <td></td> <td></td> </tr>
    </tbody>
  </table>
		<p>可拖地菜单名称调整顺序，菜单只支持两级，拖地到三级的修改无效</p>

<script type="text/javascript">
var glyph_opts = {
    map: {
      doc: "glyphicon glyphicon-file",
      docOpen: "glyphicon glyphicon-file",
      checkbox: "glyphicon glyphicon-unchecked",
      checkboxSelected: "glyphicon glyphicon-check",
      checkboxUnknown: "glyphicon glyphicon-share",
      dragHelper: "glyphicon glyphicon-play",
      dropMarker: "glyphicon glyphicon-arrow-right",
      error: "glyphicon glyphicon-warning-sign",
      expanderClosed: "glyphicon glyphicon-menu-right",
      expanderLazy: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
      expanderOpen: "glyphicon glyphicon-menu-down",  // glyphicon-collapse-down
      folder: "glyphicon glyphicon-folder-close",
      folderOpen: "glyphicon glyphicon-folder-open",
      loading: "glyphicon glyphicon-refresh glyphicon-spin"
    }
  };
$("#treetable").fancytree({
      extensions: ["dnd", "edit", "glyph", "table"],
      checkbox: false,
      dnd: {
      	  preventVoidMoves: true,
          handle:'.fancytree-node',
	      preventRecursiveMoves: true,
	      autoExpandMS: 400,
	      dragStart: function(node, data) {
          var evt = data.originalEvent;
          var ele = evt.target ? evt.target : evt.srcElement;
          if( $(ele).hasClass('fancytree-node') || $(ele).parents('.fancytree-node').size() > 0 ){
            return true; //仅标题支持拖到
          }
          else{
            return false;
          }
	        
	      },        
	      dragEnter: function(node, data) {
          return true;          
	      },
	      dragDrop: function(node, data) {
          var evt = data.originalEvent;
          var ele = evt.target ? evt.target : evt.srcElement;
          if($(ele).hasClass('fancytree-node') && $(ele).css('padding-left') == '45px' ||
             $(ele).parents('.fancytree-node').css('padding-left') == '45px' ){
            //是二级，含有缩进时，不支持第三级，设为追加指后面
            if(data.hitMode == 'over'){
              data.hitMode = 'after';
            }
          }    	
	        data.otherNode.moveTo(node, data.hitMode);

              $("#treetable").fancytree("getTree").visit(function(node){
                  node.setExpanded();
              });

	        //console.log(node);
	      	//console.log(data.otherNode);
	      	var post_data = {};
	      	post_data.drop = node.key;
	      	post_data.drag = data.otherNode.key;
	      	var dict = $("#treetable").fancytree("getTree").toDict();
	      	post_data.items = [];
	      	for(var i in dict){
                var item = {};
                item.id = dict[i].key;
                item.children = [];
                for(var j in dict[i].children){
                    item.children[item.children.length] = dict[i].children[j].key;
				        }
                post_data.items[post_data.items.length] = item;
	      	}
	      	ajaxAction('/wx_menus/dragdrop',post_data,null);
	      }
      },
      glyph: glyph_opts,
      source: {url: "/wx_menus/mine.json?group={{$_REQUEST['group']}}", debugDelay: 10},
      table: {
        checkboxColumnIdx: 0,
        indentation: 45,
        nodeColumnIdx: 1
      },

      activate: function(event, data) {
      },
      // lazyLoad: function(event, data) {
      //   data.result = {url: "ajax-sub2.json", debugDelay: 1000};
      // },
      
      renderColumns: function(event, data) {
      	
        var node = data.node,
        $tdList = $(node.tr).find(">td");
        var item = node.data;
        $tdList.eq(0).html(item.id);
        $tdList.eq(2).html(item.event);
        $tdList.eq(3).html(item.type);
        $tdList.eq(4).html(item.actions);
      }
});
</script>

       <div>
		   <p><a class="btn btn-primary" href="{{$this->Html->url(array('action'=>'importWechatMenu'))}}"><i class="fa fa-cloud-download"></i> 下载微信后台设置的菜单到135</a></p>
	   	</div>
	   	
       <div class="alert alert-info">
       <strong>提示：</strong>
       <ul>
       		<li> 微信菜单，一级菜单不超过3个，每个二级菜单数目不超过5个。</li>
       		 <li>
		            一级菜单标题长度不超过5个汉字(16个字节)，子菜单长度不超过13个汉字(40个字节).
		        </li>
		        <li>
		           发送消息回复规则长度不超过128字节
		        </li>
		        <li>
		           打开链接长度不超过256字节
		        </li>
		        <li>1个字母与数字为1字节，1个汉字为3字节</li>
      		<li> 菜单设置成功后，手机端可能有缓存，取消重新关注公众号可马上看到最新的自定义菜单效果。</li>
      		
      	</ul>
       </div>
       
       	<div>
		   <p><a class="btn btn-primary showtooltip" title="不使用135编辑器的微信菜单设置" href="{{$this->Html->url(array('action'=>'useWechatMenu'))}}"><i class="fa fa-undo"></i> 恢复微信后台原设置的菜单至公众号</a>	</p>
	   	</div>